<template>
  <div>
    <div v-show="flag">全场清仓，全部5折</div>
    <ul v-for="item in goods" :key="item.name">
      <li>
        <div>{{ item.name }}</div>
        <div>{{ item.price }}</div>
        <div>折扣：{{ saler }}</div>
      </li>
    </ul>
    <br />
    <button @click.once="fn" :disable="false">点击全场清仓</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saler: '100%',
      flag: false,
      goods: [
        {
          name: 'mac电脑',
          price: '15000',
          discount: 1,
        },
        {
          name: '百事可乐',
          price: '9',
          discount: 1,
        },
        {
          name: '保温杯',
          price: '99',
          discount: 1,
        },
        {
          name: '保暖手套',
          price: '130',
          discount: 1,
        },
      ],
    }
  },
  computed: {},

  methods: {
    fn(e) {
      this.saler = '50%'
      this.flag = !this.flag
      this.goods.forEach((item) => {
        item.price = item.price * 0.5
      })
      e.path[0].disabled = true
    },
  },
}
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  width: 200px;
  height: 80px;
  padding: 10px 0 0 0;
  border: 2px solid #333;
}
</style>
